<template>
  <div class="app" id="app_view" :data-theme="theme.class">
    <div class="app_container">
      <n-config-provider :theme="theme.theme" :theme-overrides="theme.overrides">
        <n-global-style />
        <app-provider>
          <main-view></main-view>
        </app-provider>
      </n-config-provider>
    </div>
  </div>
</template>
<script lang="ts" setup>
import MainView from "@v/main/index.vue";
import AppProvider from "@c/appProvider.vue";
import { NConfigProvider, GlobalThemeOverrides } from "naive-ui";
import { darkTheme } from "naive-ui";
import { useMainStore } from "@/store";
import { provide, ref } from "vue";

const darkThemeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: "#6F81E3FF",
    primaryColorHover: "#7E92FFFF",
    primaryColorPressed: "#6173D0FF",
    primaryColorSuppl: "#5969BEFF",
  },
  Layout: {
    color: "transparent",
    footerColor: "transparent",
    headerColor: "transparent",
    siderColor: "transparent",
    siderToggleBarColor: "#43497a",
    siderToggleBarColorHover: "#5c6395",
  },
  DataTable: {
    tdColor: "transparent",
    thColor: "transparent",
    thColorModal: "transparent",
    tdColorStripedModal: "transparent",
    tdColorStripedPopover: "transparent",
    borderColor: "rgba(155,155,155,0.1)",
    tdColorHover: "#373d6a",
    tdColorStriped: "#373d6a",
    // tdColor : 'transparent',
    // tdColor : 'transparent',
  },
};

const lightThemeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: "#4270cb",
    primaryColorHover: "#7E92FFFF",
    primaryColorPressed: "#6173D0FF",
    primaryColorSuppl: "#5969BEFF",
  },
  Layout: {
    color: "transparent",
    footerColor: "transparent",
    headerColor: "transparent",
    siderColor: "transparent",
    siderToggleBarColor: "#dadada",
    siderToggleBarColorHover: "#ccc",
  },
};

const themes = {
  dark: {
    class: "dark",
    theme: darkTheme,
    overrides: darkThemeOverrides,
  },
  light: {
    class: "light",
    theme: null,
    overrides: lightThemeOverrides,
  },
};

let mainStore = useMainStore();
let themeKeys = Object.keys(themes);
let themeIndex = 0;
let theme = ref(themes[mainStore.theme]);

const changeTheme = () => {
  mainStore.$patch((state) => {
    themeIndex++;
    state.theme = themeKeys[themeIndex % themeKeys.length];
    theme.value = themes[state.theme];
  });
};

const changLayout = (v) => {
  console.log(v);
  mainStore.$patch((state) => {
    state.layout = v;
  });
}

provide("changeTheme", changeTheme);
provide("changLayout", changLayout);
</script>
<style lang="scss" scoped>
.app_container {
  width: 100%;
  height: 100%;

  @include themeify {
    background: theme("app_background");
  }
}
</style>
